<template>
	<view class="modal-box" @click="modalClick">
		<view class="modal-detail-box" @click.prevent.stop="pren">
			<img src="../../../static/img/closse.png" class="closeBtn" @click="modalClick" />
			<view class="title">商品详情</view>
			<view class="detail">
				<view>套餐包含：{{name}}</view>
				<view>资源：{{zy}}</view>
				<view>生效方式：{{sxfs}}</view>
				<view>使用时间：{{time}}</view>
				<view>如何使用：{{rhsy}}</view>
			</view>
			<img src="../../../static/img/buyBtn2.png" class="ljxd" @click="ljxd" />
		</view>
	</view>
</template>

<script>
	const detailList = [
		{
			name: '嫩滑瘦肉粉',
			zy: '原价12.5元，小福券会员价9元',
			sxfs: '立即生效',
			time: '早餐7：00-10：00（以门店实际营业时间为准）',
			rhsy: '支付后凭券码到店核销',
			productId: '1794886583057518592',
		},
		{
			name: '冬（香）菇鸡腿肉菜+四季猪骨汤+原盅蒸饭',
			zy: '原价32元，小福券会员价21元',
			sxfs: '立即生效',
			time: '正餐：10：30-20:30（以门店实际营业时间为准）',
			rhsy: '支付后凭券码到店核销',
			productId: '1794886653576351744',
		},
		{
			name: '排骨拼鸡腿肉菜+冬（香）菇鸡腿肉菜+2份四季猪骨汤+香滑蒸蛋+2份原盅蒸饭',
			zy: '原价75.5元，小福券会员价49元',
			sxfs: '立即生效',
			time: '正餐：10：30-20:30（以门店实际营业时间为准）',
			rhsy: '支付后凭券码到店核销',
			productId: '1794886686421946368',
		},
	]
	
	export default {
		data() {
			return {
				name: '',
				zy: '',
				sxfs: '',
				time: '',
				rhsy: '',
			}
		},
		props: {
			type: [String, Number]
		},
		methods: {
			modalClick() {
				this.$emit('close')
			},
			pren() {
				return false
			},
			ljxd() {
				this.modalClick()
				this.$emit('buy', this.type)
			}
		},
		created() {
			console.log(this.type, '==>')
			const data = detailList[this.type - 1]
			Object.keys(data).forEach((key) => {
				this[key] = data[key]
			})
		},
		watch: {
			type: {
				handler(val) {
					console.log(val)
					const data = detailList[val]
					console.log(data)
				},
				deep: true,
			}
		}
	}
</script>

<style>
	.modal-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.modal-detail-box {
		width: 588rpx;
		height: 413rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 5px solid #FFD950;
		position: relative;
	}
	.closeBtn {
		width: 29rpx;
		height: 29rpx;
		position: absolute;
		right: 18rpx;
		top: 18rpx;
	}
	.title {
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
		margin-top: 37rpx;
		margin-left: 33rpx;
	}
	.detail {
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-left: 33rpx;
		margin-right: 33rpx;
	}
	.ljxd {
		width: 161rpx;
		height: 52rpx;
		position: absolute;
		bottom: 15rpx;
		left: 214rpx;
	}
</style>